<template>
  <view class="product-outbound-container">
    <!-- 提交按钮区域 -->
    <view class="submit-section">
      <button class="submit-btn" @click="handleSubmit" :class="{ disabled: !canSubmitAllOutbound }">
        <text class="submit-text">提交出库</text>
      </button>
    </view>

    <!-- 查询区域 -->
    <view class="query-section">
      <view class="query-header">
        <text class="query-title">查询出库单</text>
        
        <!-- PDA扫描控制区域 -->
        <view class="scan-control-area">
          <view class="auto-confirm-row">
            <text class="auto-confirm-label">SN自动确认:</text>
            <switch 
              :checked="autoConfirmEnabled" 
              @change="toggleAutoConfirm"
              color="#007AFF"
            />
          </view>
        </view>
        
        <view class="query-tabs">
          <view 
            class="tab-item" 
            :class="{ active: currentTab === 'scan' }"
            @click="switchTab('scan')"
          >
            扫码查询
          </view>
          <view 
            class="tab-item" 
            :class="{ active: currentTab === 'code' }"
            @click="switchTab('code')"
          >
            单号查询
          </view>
          <view 
            class="tab-item" 
            :class="{ active: currentTab === 'record' }"
            @click="switchTab('record')"
          >
            出库记录
          </view>
        </view>
      </view>

      <!-- 查询输入区域 -->
      <view class="query-input-area">
        <!-- 扫码查询 -->
        <view v-if="currentTab === 'scan'" class="input-group">
          <text class="input-label">扫描产品SN码</text>
          <view class="input-wrapper">
            <input 
              class="query-input" 
              v-model="queryData.snCode"
              placeholder="请扫描或输入产品SN码"
              @confirm="handleSnQuery"
            />
            <view class="input-icon" @click="clearSnCode">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <button class="query-btn" @click="handleSnQuery">查询</button>
        </view>

        <!-- 单号查询 -->
        <view v-if="currentTab === 'code'" class="input-group">
          <text class="input-label">输入出库单号</text>
          <view class="input-wrapper">
            <input 
              class="query-input" 
              v-model="queryData.salesCode"
              placeholder="请输入出库单号"
              @confirm="handleSalesCodeQuery"
            />
            <view class="input-icon" @click="clearSalesCode">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <button class="query-btn" @click="handleSalesCodeQuery">查询</button>
        </view>
      </view>
    </view>

    <!-- 出库单信息展示 -->
    <view v-if="outboundInfo" class="outbound-info-section">
      <view class="info-header">
        <text class="info-title">出库单信息</text>
        <text class="info-status" :class="getStatusClass(outboundInfo.status)">
          {{ getStatusText(outboundInfo.status) }}
        </text>
      </view>
      <view class="info-content">
        <view class="info-row">
          <text class="info-label">出库单号:</text>
          <text class="info-value">{{ outboundInfo.salesCode }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">客户名称:</text>
          <text class="info-value">{{ outboundInfo.clientName }}</text>
        </view>
<!--        <view class="info-row">
          <text class="info-label">单据状态:</text>
          <text class="info-value">{{ getStatusText(outboundInfo.status) }}</text>
        </view>-->
          <view class="info-row combined-row">
            <text class="info-label">总行数 / 总明细数:</text>
            <text class="info-value combined-value">{{ totalLines }} / {{ totalDetails }}</text>
          </view>

      </view>
    </view>

    <!-- 出库明细表格 -->
    <view v-if="salesLines && salesLines.length > 0" class="details-section">
      <view class="section-header">
        <text class="section-title">出库明细</text>
        <text class="section-count">共{{ salesLines.length }}行</text>
      </view>

      <view class="details-table">
        <view class="table-header">
          <text class="table-cell">行号</text>
          <text class="table-cell">产品编码</text>
          <text class="table-cell">产品名称</text>
          <text class="table-cell">规格型号</text>
          <text class="table-cell">出库数量</text>
          <text class="table-cell">明细数</text>
          <text class="table-cell">确认进度</text>
          <text class="table-cell">操作</text>
        </view>
        <view class="table-body">
          <view
            v-for="(line, index) in salesLines"
            :key="line.lineId"
            class="table-row"
          >
            <text class="table-cell">{{ index + 1 }}</text>
            <text class="table-cell">{{ line.itemCode }}</text>
            <text class="table-cell">{{ line.itemName }}</text>
            <text class="table-cell">{{ line.specification }}</text>
            <text class="table-cell">{{ line.quantitySales }}</text>
            <text class="table-cell">{{ line.details ? line.details.length : 0 }}</text>
            <text class="table-cell">
              <text class="progress-text">
                {{ getConfirmProgress(line) }}
              </text>
            </text>
            <text class="table-cell">
              <button
                class="detail-btn"
                @click="showLineDetails(line)"
                :disabled="!line.details || line.details.length === 0"
              >
                查看
              </button>
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 出库记录表格 -->
    <view v-if="currentTab === 'record'" class="record-section">
      <view class="section-header">
        <text class="section-title">出库记录</text>
        <text class="section-count">共{{ outboundRecords.length }}条</text>
      </view>

      <view class="record-table">
        <view class="table-header">
          <text class="table-cell">序号</text>
          <text class="table-cell">SN码</text>
          <text class="table-cell">产品编码</text>
          <text class="table-cell">产品名称</text>
          <text class="table-cell">批次号</text>
          <text class="table-cell">确认状态</text>
          <text class="table-cell">确认人</text>
          <text class="table-cell">确认时间</text>
        </view>
        <view class="table-body">
          <view
            v-for="(record, index) in outboundRecords"
            :key="index"
            class="table-row"
          >
            <text class="table-cell">{{ index + 1 }}</text>
            <text class="table-cell">{{ record.sn }}</text>
            <text class="table-cell">{{ record.itemCode }}</text>
            <text class="table-cell">{{ record.itemName }}</text>
            <text class="table-cell">{{ record.batchCode }}</text>
            <text class="table-cell">
              <text
                class="status-tag"
                :class="getConfirmStatusClass(record.confirmStatus)"
              >
                {{ getConfirmStatusText(record.confirmStatus) }}
              </text>
            </text>
            <text class="table-cell">{{ record.confirmBy || '-' }}</text>
            <text class="table-cell">{{ record.confirmTime || '-' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 扩展功能区域 -->
    <view class="extended-functions">
      <view class="function-header">
        <text class="function-title">统计信息</text>
        <uni-icons type="up" size="16" color="#666"></uni-icons>
      </view>

      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-label">已扫产品数</text>
          <text class="stat-value">{{ stats.scannedProducts }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">已扫数量</text>
          <text class="stat-value">{{ stats.scannedQuantity }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">已扫SN数</text>
          <text class="stat-value">{{ stats.scannedSns }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">完成率</text>
          <text class="stat-value">{{ completionRate }}%</text>
        </view>
      </view>
    </view>

    <!-- SN明细弹窗 -->
    <view v-if="showSnDetail" class="sn-detail-modal" @click="closeSnDetail">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">SN明细信息</text>
          <view class="modal-close" @click="closeSnDetail">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>

        <view class="modal-body">
          <!-- 产品信息摘要 -->
          <view class="product-summary">
            <view class="summary-row">
              <text class="summary-label">产品编码:</text>
              <text class="summary-value">{{ currentLine && currentLine.itemCode }}</text>
            </view>
            <view class="summary-row">
              <text class="summary-label">产品名称:</text>
              <text class="summary-value">{{ currentLine && currentLine.itemName }}</text>
            </view>
            <view class="summary-row">
              <text class="summary-label">出库数量:</text>
              <text class="summary-value">{{ currentLine && currentLine.quantitySales }}</text>
            </view>
          </view>

          <!-- SN明细表格 -->
          <view class="sn-detail-table">
            <view class="table-header">
              <text class="table-cell">SN码</text>
              <text class="table-cell">确认状态</text>
              <text class="table-cell">操作</text>
            </view>
            <view class="table-body">
              <view
                v-for="snDetail in currentLineDetails"
                :key="snDetail.detailId"
                class="table-row"
              >
                <text class="table-cell">{{ snDetail.sn }}</text>
                <text class="table-cell">
                  <text
                    class="status-tag"
                    :class="getConfirmStatusClass(snDetail.confirmStatus)"
                  >
                    {{ getConfirmStatusText(snDetail.confirmStatus) }}
                  </text>
                </text>
                <text class="table-cell">
                  <button
                    class="confirm-btn"
                    @click="confirmSn(snDetail)"
                    :disabled="snDetail.confirmStatus === 'Y'"
                  >
                    {{ snDetail.confirmStatus === 'Y' ? '已确认' : '确认' }}
                  </button>
                </text>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="modal-actions">
            <button class="action-btn cancel" @click="closeSnDetail">关闭</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 运单号填写弹窗 -->
    <view v-if="showShippingModal" class="shipping-modal" @click="closeShippingModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">填写运单信息</text>
          <view class="modal-close" @click="closeShippingModal">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>

        <view class="modal-body">
          <view class="input-group">
            <text class="input-label">承运商</text>
            <input
              class="modal-input"
              v-model="shippingInfo.carrier"
              placeholder="请输入承运商"
            />
          </view>

          <view class="input-group">
            <text class="input-label">运输单号</text>
            <input
              class="modal-input"
              v-model="shippingInfo.trackingNumber"
              placeholder="请输入运输单号"
            />
          </view>

          <view class="input-group">
            <text class="input-label">收货地址</text>
            <input
              class="modal-input"
              v-model="shippingInfo.shippingAddress"
              placeholder="请输入收货地址"
            />
          </view>

          <view class="input-group">
            <text class="input-label">收货人</text>
            <input
              class="modal-input"
              v-model="shippingInfo.consignee"
              placeholder="请输入收货人"
            />
          </view>

          <view class="input-group">
            <text class="input-label">联系方式</text>
            <input
              class="modal-input"
              v-model="shippingInfo.contactInfo"
              placeholder="请输入联系方式"
            />
          </view>

          <view class="modal-actions">
            <button class="action-btn cancel" @click="closeShippingModal">取消</button>
            <button class="action-btn confirm" @click="submitWithShipping">提交出库</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getOutboundBySnCode,
  getOutboundBySalesCode,
  scanOutboundConfirm,
  executeOutbound
} from '@/api/wm/productrecpt'
import { initScan, startScan, stopScan, isPdaScanAvailable } from '@/utils/pdaScan'

export default {
  name: 'ProductOutbound',
  data() {
    return {
      currentTab: 'scan',
      queryData: {
        snCode: '',
        salesCode: ''
      },
      stats: {
        scannedProducts: 0,
        scannedQuantity: 0,
        scannedSns: 0
      },
      outboundRecords: [],
      // 出库单信息
      outboundInfo: null,
      salesLines: [],
      totalLines: 0,
      totalDetails: 0,
      currentOutboundId: null,
      // SN明细
      currentLine: null,
      currentLineDetails: [],
      showSnDetail: false,
      showShippingModal: false,
      // 运单信息
      shippingInfo: {
        carrier: '',
        trackingNumber: '',
        shippingAddress: '',
        consignee: '',
        contactInfo: ''
      },
      // PDA扫描监听相关
      autoConfirmEnabled: true // 是否启用SN自动确认
    }
  },

  computed: {
    completionRate() {
      if (this.stats.scannedProducts === 0) return 0
      return Math.round((this.stats.scannedQuantity / this.stats.scannedProducts) * 100)
    },

    // 判断是否可以提交出库
    canSubmitOutbound() {
      if (!this.outboundInfo || !this.currentLineDetails || this.currentLineDetails.length === 0) {
        return false
      }

      // 检查出库单状态
      if (this.outboundInfo.status !== 'UNEXECUTE' && this.outboundInfo.status !== 'UNSHIPPING') {
        return false
      }

      // 检查是否有已确认的SN
      const confirmedCount = this.currentLineDetails.filter(sn => sn.confirmStatus === 'Y').length
      return confirmedCount > 0
    },

    // 获取当前行的确认进度
    currentLineConfirmProgress() {
      if (!this.currentLineDetails || this.currentLineDetails.length === 0) {
        return '0/0'
      }

      const confirmedCount = this.currentLineDetails.filter(sn => sn.confirmStatus === 'Y').length
      const totalCount = this.currentLineDetails.length

      return `${confirmedCount}/${totalCount}`
    },

    // 判断是否可以提交整个出库单（所有行的所有SN都已确认）
    canSubmitAllOutbound() {
      if (!this.outboundInfo || !this.salesLines || this.salesLines.length === 0) {
        return false
      }

      // 检查出库单状态
      if (this.outboundInfo.status !== 'UNEXECUTE' && this.outboundInfo.status !== 'UNSHIPPING') {
        return false
      }

      // 检查所有行的所有SN是否都已确认
      for (let line of this.salesLines) {
        if (!line.details || line.details.length === 0) {
          return false
        }

        // 检查这一行的所有SN是否都已确认
        const unconfirmedSns = line.details.filter(sn => sn.confirmStatus !== 'Y')
        if (unconfirmedSns.length > 0) {
          return false
        }
      }

      return true
    }
  },

  // 生命周期钩子
  onLoad() {
    this.initPdaScanListener()
  },

  onShow() {
    // 页面显示时启动扫描监听
    this.startScanListener()
  },

  onHide() {
    // 页面隐藏时停止扫描监听
    this.stopScanListener()
  },

  onUnload() {
    // 页面卸载时清理资源
    this.cleanupScanListener()
  },

  methods: {
    // 初始化PDA扫描监听
    initPdaScanListener() {
      console.log('初始化PDA扫描监听')
      
      // 检查PDA扫描功能是否可用
      if (isPdaScanAvailable()) {
        // 初始化广播扫描
        initScan(this.handlePdaScanResult)
        console.log('PDA广播扫描已初始化')
      }
    },


    // 启动扫描监听
    startScanListener() {
      try {
        if (isPdaScanAvailable()) {
          startScan()
          console.log('PDA广播扫描监听已启动')
        }
      } catch (error) {
        console.error('启动扫描监听失败:', error)
      }
    },

    // 停止扫描监听
    stopScanListener() {
      try {
        if (isPdaScanAvailable()) {
          stopScan()
          console.log('PDA广播扫描监听已停止')
        }
      } catch (error) {
        console.error('停止扫描监听失败:', error)
      }
    },

    // 清理扫描监听资源
    cleanupScanListener() {
      this.stopScanListener()
      console.log('PDA扫描资源已清理')
    },

    // 处理PDA扫描结果
    handlePdaScanResult(code) {
      console.log('PDA红外扫描结果:', code)
      
      if (!code || !code.trim()) {
        console.log('扫描结果为空')
        return
      }
      
      const scanData = code.trim()
      
      // 根据当前标签页设置对应的输入框并自动处理
      if (this.currentTab === 'scan') {
        this.queryData.snCode = scanData
        // 自动处理扫描结果
        this.handleSnQuery()
      } else if (this.currentTab === 'code') {
        this.queryData.salesCode = scanData
        // 自动处理扫描结果
        this.handleSalesCodeQuery()
      }
    },

    // 自动确认SN
    async autoConfirmSn(snCode) {
      try {
        // 查找对应的SN明细
        let targetSnDetail = null
        if(this.salesLines ==null || this.salesLines.length == 0){
			console.log("未加载明细");
			return ;
		}
        // 在所有出库行中查找匹配的SN
        for (const line of this.salesLines) {
          if (line.details) {
            const snDetail = line.details.find(detail => detail.sn === snCode)
            if (snDetail) {
              targetSnDetail = snDetail
              break
            }
          }
        }
        if (!targetSnDetail) {
          uni.showToast({
            title: '未找到对应的SN明细',
            icon: 'none'
          })
          return
        }
        
        // 检查是否已经确认
        if (targetSnDetail.confirmStatus === 'Y') {
          uni.showToast({
            title: '该SN码已经确认',
            icon: 'none'
          })
          return
        }
        
        uni.showLoading({
          title: '自动确认中...'
        })
        
        // 调用确认API
        const response = await scanOutboundConfirm(snCode)
        console.log('SN自动确认响应:', response)
        
        if (response.code === 200) {
          // 更新SN明细的确认状态
          targetSnDetail.confirmStatus = 'Y'
          targetSnDetail.confirmBy = response.data.confirmBy
          targetSnDetail.confirmTime = response.data.confirmTime
          
          uni.showToast({
            title: 'SN自动确认成功',
            icon: 'success'
          })
          
          // 更新统计信息
          this.updateStats()
          
          // 更新总行数和总明细数
          this.updateTotalStats()
          
        } else {
          uni.showToast({
            title: response.msg || 'SN自动确认失败',
            icon: 'none'
          })
        }
        
      } catch (error) {
        console.error('SN自动确认失败:', error)
        uni.showToast({
          title: 'SN自动确认失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 切换自动确认功能
    toggleAutoConfirm() {
      this.autoConfirmEnabled = !this.autoConfirmEnabled
      uni.showToast({
        title: this.autoConfirmEnabled ? '已启用SN自动确认' : '已关闭SN自动确认',
        icon: 'none'
      })
    },


    switchTab(tab) {
      this.currentTab = tab
      if (tab === 'record') {
        this.loadOutboundRecords()
      }
    },

    // SN码查询
    async handleSnQuery() {
      if (!this.queryData.snCode.trim()) {
        uni.showToast({
          title: '请输入SN码',
          icon: 'none'
        })
        return
      }

      try {
        await this.getOutboundBySnCode(this.queryData.snCode)
        
        // 如果启用了自动确认，则自动确认SN
        if (this.autoConfirmEnabled) {
          await this.autoConfirmSn(this.queryData.snCode)
        }
      } catch (error) {
        console.error('SN查询处理失败:', error)
      }
    },

    // 出库单号查询
    async handleSalesCodeQuery() {
      if (!this.queryData.salesCode.trim()) {
        uni.showToast({
          title: '请输入出库单号',
          icon: 'none'
        })
        return
      }

      await this.getOutboundBySalesCode(this.queryData.salesCode)
    },

    // 根据SN码获取出库单信息
    async getOutboundBySnCode(snCode) {
      try {
        uni.showLoading({
          title: '查询中...'
        })

        console.log('=== SN码查询调试信息 ===')
        console.log('扫描SN码:', snCode)

        const response = await getOutboundBySnCode(snCode)
        console.log('出库单信息响应:', response)

        if (response.code === 200 && response.data) {
          this.setOutboundData(response.data)
          uni.showToast({
            title: '查询成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: response.msg || '未找到对应的SN码信息',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('查询出库单信息失败:', error)
        // uni.showToast({
        //   title: '查询出库单信息失败',
        //   icon: 'none'
        // })
      } finally {
        uni.hideLoading()
      }
    },

    // 根据出库单号获取出库单信息
    async getOutboundBySalesCode(salesCode) {
      try {
        uni.showLoading({
          title: '查询中...'
        })

        console.log('=== 出库单号查询调试信息 ===')
        console.log('出库单号:', salesCode)

        const response = await getOutboundBySalesCode(salesCode)
        console.log('出库单信息响应:', response)

        if (response.code === 200 && response.data) {
          this.setOutboundData(response.data)
          uni.showToast({
            title: '查询成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: response.msg || '未找到对应的出库单信息',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('查询出库单信息失败:', error)
        // uni.showToast({
        //   title: '查询出库单信息失败',
        //   icon: 'none'
        // })
      } finally {
        uni.hideLoading()
      }
    },

    // 设置出库单数据
    setOutboundData(data) {
      // 设置出库单信息
      this.outboundInfo = data.salesHeader
      this.salesLines = data.salesLines || []
      this.totalLines = data.totalLines || 0
      this.totalDetails = data.totalDetails || 0
      this.currentOutboundId = data.salesHeader.salesId
    },

    clearSnCode() {
      this.queryData.snCode = ''
    },

    clearSalesCode() {
      this.queryData.salesCode = ''
    },

    // 显示行明细
    showLineDetails(line) {
      this.currentLine = line
      this.currentLineDetails = line.details || []
      this.showSnDetail = true
    },

    closeSnDetail() {
      this.showSnDetail = false
      this.currentLine = null
      this.currentLineDetails = []
    },

    // 确认SN
    async confirmSn(snDetail) {
      try {
        // 检查是否已经确认
        if (snDetail.confirmStatus === 'Y') {
          uni.showToast({
            title: '该SN码已经确认，无需重复操作',
            icon: 'none'
          })
          return
        }

        uni.showLoading({
          title: '确认中...'
        })

        const response = await scanOutboundConfirm(snDetail.sn)
        console.log('SN确认响应:', response)

        if (response.code === 200) {
          // 更新SN明细的确认状态
          snDetail.confirmStatus = 'Y'
          snDetail.confirmBy = response.data.confirmBy
          snDetail.confirmTime = response.data.confirmTime

          uni.showToast({
            title: 'SN确认成功',
            icon: 'success'
          })

          // 刷新当前行的明细状态
          this.refreshLineDetails(snDetail)
        } else {
          uni.showToast({
            title: response.msg || 'SN确认失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('SN确认失败:', error)
        uni.showToast({
          title: 'SN确认失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },


    // 刷新行明细状态
    refreshLineDetails(confirmedSn) {
      if (this.currentLine && this.currentLine.details) {
        const detail = this.currentLine.details.find(d => d.sn === confirmedSn.sn)
        if (detail) {
          detail.status = 'CONFIRMED'
        }
      }
    },

    // 提交出库
    async submitOutbound() {
      try {
        if (!this.canSubmitOutbound) {
          uni.showToast({
            title: '当前状态不允许提交出库',
            icon: 'none'
          })
          return
        }

        // 获取已确认的SN列表
        const confirmedSns = this.currentLineDetails.filter(sn => sn.confirmStatus === 'Y')

        if (confirmedSns.length === 0) {
          uni.showToast({
            title: '没有已确认的SN码',
            icon: 'none'
          })
          return
        }

        uni.showLoading({
          title: '提交出库中...'
        })

        // 构建提交数据
        const submitData = {
          salesId: this.outboundInfo.salesId, // 出库单ID，用于后端接口
          salesCode: this.outboundInfo.salesCode,
          lineId: this.currentLine.lineId,
          confirmedSns: confirmedSns.map(sn => ({
            sn: sn.sn,
            detailId: sn.detailId,
            confirmBy: sn.confirmBy,
            confirmTime: sn.confirmTime
          }))
        }

        console.log('提交出库数据:', submitData)

        // 调用提交出库API
        const response = await this.submitOutboundToBackend(submitData)

        if (response.code === 200) {
          // 更新出库单状态
          this.outboundInfo.status = 'FINISHED'

          // 更新SN状态
          confirmedSns.forEach(sn => {
            sn.outboundStatus = 'SHIPPED'
            sn.outboundTime = new Date().toLocaleString()
          })

          // 添加到出库记录
          confirmedSns.forEach(sn => {
            this.addToOutboundRecords(sn)
          })

          this.updateStats()

          uni.showToast({
            title: '出库提交成功',
            icon: 'success'
          })

          // 关闭弹窗
          this.closeSnDetail()

        } else {
          uni.showToast({
            title: response.msg || '出库提交失败',
            icon: 'none'
          })
        }

      } catch (error) {
        console.error('提交出库失败:', error)
        uni.showToast({
          title: '提交出库失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 调用后端提交出库API
    async submitOutboundToBackend(data) {
      try {
        // 使用出库单ID调用后端执行出库接口
        const response = await executeOutbound(data.salesId)
        console.log('执行出库响应:', response)
        return response
      } catch (error) {
        console.error('执行出库API调用失败:', error)
        throw error
      }
    },

    closeShippingModal() {
      this.showShippingModal = false
    },

    async submitWithShipping() {
      if (!this.shippingInfo.trackingNumber.trim()) {
        uni.showToast({
          title: '请输入运输单号',
          icon: 'none'
        })
        return
      }

      // 这里可以调用带运单号的出库接口
      uni.showToast({
        title: '带运单号出库功能待实现',
        icon: 'none'
      })
    },

    addToOutboundRecords(snDetail) {
      const record = {
        sn: snDetail.sn,
        itemCode: this.currentLine && this.currentLine.itemCode,
        itemName: this.currentLine && this.currentLine.itemName,
        batchCode: snDetail.batchCode,
        confirmStatus: snDetail.confirmStatus || 'Y',
        confirmBy: snDetail.confirmBy || '当前用户',
        confirmTime: snDetail.confirmTime || new Date().toLocaleString(),
        status: 'CONFIRMED'
      }

      this.outboundRecords.unshift(record)
    },

    updateStats() {
      this.stats.scannedSns += 1
      if (this.currentLine) {
        this.stats.scannedProducts += 1
        this.stats.scannedQuantity += this.currentLine.quantitySales
      }
    },

    // 更新总行数和总明细数
    updateTotalStats() {
      if (this.salesLines && this.salesLines.length > 0) {
        let totalConfirmedDetails = 0
        this.salesLines.forEach(line => {
          if (line.details) {
            const confirmedCount = line.details.filter(detail => detail.confirmStatus === 'Y').length
            totalConfirmedDetails += confirmedCount
          }
        })
        
        // 更新总明细数显示（已确认的数量）
        this.totalDetails = totalConfirmedDetails
        
        console.log('更新总统计:', {
          totalLines: this.salesLines.length,
          totalDetails: totalConfirmedDetails
        })
      }
    },

    async handleSubmit() {
      try {
        if (!this.canSubmitAllOutbound) {
          // 检查具体原因并给出提示
          if (!this.outboundInfo) {
            uni.showToast({
              title: '请先查询出库单',
              icon: 'none'
            })
            return
          }

          if (this.outboundInfo.status !== 'UNEXECUTE' && this.outboundInfo.status !== 'UNSHIPPING') {
            uni.showToast({
              title: '当前出库单状态不允许提交',
              icon: 'none'
            })
            return
          }

          // 检查未确认的SN
          const unconfirmedLines = []
          for (let i = 0; i < this.salesLines.length; i++) {
            const line = this.salesLines[i]
            if (line.details) {
              const unconfirmedSns = line.details.filter(sn => sn.confirmStatus !== 'Y')
              if (unconfirmedSns.length > 0) {
                unconfirmedLines.push({
                  lineNumber: i + 1,
                  productName: line.itemName,
                  unconfirmedCount: unconfirmedSns.length,
                  totalCount: line.details.length
                })
              }
            }
          }

          if (unconfirmedLines.length > 0) {
            const message = `第${unconfirmedLines[0].lineNumber}行还有${unconfirmedLines[0].unconfirmedCount}个SN未确认`
            uni.showToast({
              title: message,
              icon: 'none',
              duration: 3000
            })
            return
          }
        }

        uni.showLoading({
          title: '提交出库单中...'
        })

        // 调用后端执行出库接口
        const response = await executeOutbound(this.outboundInfo.salesId)

        if (response.code === 200) {
          // 更新出库单状态
          this.outboundInfo.status = 'FINISHED'

          // 更新所有SN状态
          this.salesLines.forEach(line => {
            if (line.details) {
              line.details.forEach(sn => {
                sn.outboundStatus = 'SHIPPED'
                sn.outboundTime = new Date().toLocaleString()
              })
            }
          })

          // 更新统计信息
          this.updateStats()

          uni.showToast({
            title: '出库单提交成功',
            icon: 'success'
          })

          // 重置数据并返回
          this.resetData()

          setTimeout(() => {
            uni.navigateBack()
          }, 1500)

        } else {
          uni.showToast({
            title: response.msg || '出库单提交失败',
            icon: 'none'
          })
        }

      } catch (error) {
        console.error('提交出库单失败:', error)
        uni.showToast({
          title: '提交出库单失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 加载出库记录
    loadOutboundRecords() {
      // 这里可以调用API加载历史出库记录
      // 目前使用本地数据
      console.log('加载出库记录')
    },

    resetData() {
      this.queryData = {
        snCode: '',
        salesCode: ''
      }
      this.stats = {
        scannedProducts: 0,
        scannedQuantity: 0,
        scannedSns: 0
      }
      this.outboundRecords = []
      this.outboundInfo = null
      this.salesLines = []
      this.totalLines = 0
      this.totalDetails = 0
      this.currentOutboundId = null
      this.currentLine = null
      this.currentLineDetails = []
      this.showSnDetail = false
      this.showShippingModal = false
      this.shippingInfo = {
        carrier: '',
        trackingNumber: '',
        shippingAddress: '',
        consignee: '',
        contactInfo: ''
      }
    },

    getStatusText(status) {
      const statusMap = {
        'PREPARE': '草稿',
        'UNSTOCK': '待拣货',
        'UNCHECK': '待检验',
        'UNSHIPPING': '待填写运单',
        'UNEXECUTE': '待执行',
        'FINISHED': '已完成',
        'CANCELED': '已取消',
        'PENDING': '待处理',
        'PROCESSING': '处理中',
        'COMPLETED': '已完成',
        'CANCELLED': '已取消',
        'DRAFT': '草稿',
        'SHIPPING': '出库中',
        'SHIPPED': '已出库'
      }
      return statusMap[status] || status
    },

    getStatusClass(status) {
      const classMap = {
        'PREPARE': 'status-prepare',
        'UNSTOCK': 'status-unstock',
        'UNCHECK': 'status-uncheck',
        'UNSHIPPING': 'status-unshipping',
        'UNEXECUTE': 'status-unexecute',
        'FINISHED': 'status-finished',
        'CANCELED': 'status-canceled',
        'PENDING': 'status-pending',
        'PROCESSING': 'status-processing',
        'COMPLETED': 'status-completed',
        'CANCELLED': 'status-cancelled',
        'DRAFT': 'status-draft',
        'SHIPPING': 'status-shipping',
        'SHIPPED': 'status-shipped'
      }
      return classMap[status] || 'status-default'
    },

    getRecordStatusText(status) {
      const statusMap = {
        'PENDING': '待确认',
        'CONFIRMED': '已确认',
        'SHIPPED': '已出库',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },

    getRecordStatusClass(status) {
      const classMap = {
        'PENDING': 'record-status-pending',
        'CONFIRMED': 'record-status-confirmed',
        'SHIPPED': 'record-status-shipped',
        'CANCELLED': 'record-status-cancelled'
      }
      return classMap[status] || 'record-status-default'
    },

    // 获取确认状态文本
    getConfirmStatusText(confirmStatus) {
      const statusMap = {
        'Y': '已确认',
        'N': '未确认'
      }
      return statusMap[confirmStatus] || '未知'
    },

    // 获取确认状态样式类
    getConfirmStatusClass(confirmStatus) {
      const classMap = {
        'Y': 'confirm-status-confirmed',
        'N': 'confirm-status-pending'
      }
      return classMap[confirmStatus] || 'confirm-status-default'
    },

    // 获取确认进度
    getConfirmProgress(line) {
      if (!line.details || line.details.length === 0) {
        return '0/0'
      }

      const confirmedCount = line.details.filter(detail => detail.confirmStatus === 'Y').length
      const totalCount = line.details.length

      return `${confirmedCount}/${totalCount}`
    }
  }
}
</script>

<style lang="scss" scoped>
.product-outbound-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.submit-section {
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    border: none;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);
    
    .submit-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
    }
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
    }
    
    &.disabled {
      background: linear-gradient(135deg, #9E9E9E 0%, #757575 100%) !important;
      box-shadow: 0 2rpx 8rpx rgba(158, 158, 158, 0.3) !important;
      pointer-events: none;
      
      .submit-text {
        color: #fff;
      }
    }
  }
}

.query-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
  border: 1rpx solid rgba(0,0,0,0.05);

  .query-header {
    padding: 32rpx;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1rpx solid rgba(0,0,0,0.05);

    .query-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 24rpx;
      display: block;
      text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.05);
    }

    .scan-control-area {
      margin-bottom: 24rpx;
      padding: 20rpx;
      background: rgba(255,255,255,0.8);
      border-radius: 12rpx;
      border: 1rpx solid rgba(0,122,255,0.1);

      .auto-confirm-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .auto-confirm-label {
          font-size: 24rpx;
          color: #666;
          font-weight: 500;
        }
      }
    }

    .query-tabs {
      display: flex;
      gap: 16rpx;

      .tab-item {
        padding: 14rpx 28rpx;
        border-radius: 25rpx;
        font-size: 24rpx;
        color: #6c757d;
        background: #fff;
        border: 1rpx solid rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        font-weight: 500;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);

        &.active {
          background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
          color: #fff;
          box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.3);
          transform: translateY(-1rpx);
        }

        &:not(.active):hover {
          color: #007AFF;
          background: rgba(0,122,255,0.05);
          border-color: rgba(0,122,255,0.2);
        }
      }
    }
  }

  .query-input-area {
    padding: 32rpx;

    .input-group {
      .input-label {
        display: block;
        font-size: 28rpx;
        color: #2c3e50;
        margin-bottom: 16rpx;
        font-weight: 500;
      }

      .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .query-input {
          flex: 1;
          height: 88rpx;
          padding: 0 24rpx 0 24rpx;
          border: 2rpx solid #e9ecef;
          border-radius: 16rpx;
          font-size: 28rpx;
          background: #fff;
          transition: all 0.3s ease;
          box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);

          &:focus {
            border-color: #007AFF;
            box-shadow: 0 4rpx 16rpx rgba(0,122,255,0.15);
            outline: none;
          }
        }

        .input-icon {
          position: absolute;
          right: 24rpx;
          z-index: 1;
          padding: 8rpx;
          border-radius: 50%;
          transition: all 0.3s ease;

          &:active {
            background: rgba(0,0,0,0.05);
            transform: scale(0.9);
          }
        }
      }

      .query-btn {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
        color: #fff;
        border: none;
        border-radius: 16rpx;
        font-size: 28rpx;
        font-weight: bold;
        box-shadow: 0 4rpx 16rpx rgba(0,122,255,0.3);
        transition: all 0.3s ease;

        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 2rpx 8rpx rgba(0,122,255,0.3);
        }
      }
    }
  }
}

.outbound-info-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
  border: 1rpx solid rgba(0,0,0,0.05);

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid rgba(0,0,0,0.05);

    .info-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #2c3e50;
      text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.05);
    }

    .info-status {
      padding: 10rpx 20rpx;
      border-radius: 25rpx;
      font-size: 22rpx;
      font-weight: 500;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
      border: 1rpx solid rgba(255,255,255,0.2);

      &.status-prepare {
        background: #e2e3e5;
        color: #383d41;
      }

      &.status-unstock {
        background: #fff3cd;
        color: #856404;
      }

      &.status-uncheck {
        background: #ffeaa7;
        color: #6c5ce7;
      }

      &.status-unshipping {
        background: #fff3cd;
        color: #856404;
      }

      &.status-unexecute {
        background: #74b9ff;
        color: #ffffff;
      }

      &.status-finished {
        background: #d4edda;
        color: #155724;
      }

      &.status-canceled {
        background: #f8d7da;
        color: #721c24;
      }

      &.status-shipping {
        background: #d1ecf1;
        color: #0c5460;
      }

      &.status-shipped {
        background: #d4edda;
        color: #155724;
      }

      &.status-default {
        background: #e2e3e5;
        color: #383d41;
      }
    }
  }

  .info-content {
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18rpx;
      padding: 12rpx 0;
      border-bottom: 1rpx solid rgba(0,0,0,0.03);

      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }

      .info-label {
        font-size: 26rpx;
        color: #6c757d;
        min-width: 120rpx;
        font-weight: 500;
      }

      .info-value {
        font-size: 26rpx;
        color: #2c3e50;
        flex: 1;
        text-align: right;
        font-weight: 500;
      }

      &.combined-row {
        background: linear-gradient(135deg, rgba(0,122,255,0.05) 0%, rgba(90,200,250,0.05) 100%);
        border-radius: 12rpx;
        padding: 16rpx 20rpx;
        margin: 8rpx 0;
        border: 1rpx solid rgba(0,122,255,0.1);

        .info-label {
          color: #007AFF;
          font-weight: 600;
        }

        .combined-value {
          color: #007AFF;
          font-weight: 600;
          font-size: 28rpx;
          text-shadow: 0 1rpx 2rpx rgba(0,122,255,0.1);
        }
      }
    }
  }
}

.details-section, .record-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
  border: 1rpx solid rgba(0,0,0,0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1rpx solid rgba(0,0,0,0.05);

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #2c3e50;
      text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.05);
    }

    .section-count {
      font-size: 24rpx;
      color: #6c757d;
      font-weight: 500;
    }
  }

  .details-table, .record-table {
    overflow-x: auto; // 允许水平滚动
    width: 100%; // 确保表格容器占满父容器宽度

    .table-header {
      display: flex;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-bottom: 2rpx solid #dee2e6;
      min-width: 1100rpx; // 调整最小宽度为实际需要的宽度

      .table-cell {
        padding: 15rpx 8rpx;
        font-size: 22rpx;
        font-weight: bold;
        color: #495057;
        text-align: center;
        border-right: 1rpx solid #dee2e6;
        word-break: keep-all;
        white-space: nowrap;

        &:last-child {
          border-right: none;
        }

        // 为不同列设置合适的宽度 - 8列布局（包含行号）
        &:nth-child(1) {
          // 行号
          flex: 0 0 60rpx;
          min-width: 60rpx;
          font-size: 22rpx;
        }

        &:nth-child(2) {
          // 产品编码
          flex: 0 0 120rpx;
          min-width: 120rpx;
          font-size: 22rpx;
        }

        &:nth-child(3) {
          // 产品名称
          flex: 0 0 180rpx;
          min-width: 180rpx;
          text-align: left;
          white-space: normal;
          word-break: break-all;
          font-size: 22rpx;
          line-height: 1.3;
        }

        &:nth-child(4) {
          // 规格型号
          flex: 0 0 160rpx;
          min-width: 160rpx;
          text-align: left;
          white-space: normal;
          word-break: break-all;
          font-size: 22rpx;
          line-height: 1.3;
        }

        &:nth-child(5) {
          // 出库数量
          flex: 0 0 90rpx;
          min-width: 90rpx;
          font-size: 22rpx;
        }

        &:nth-child(6) {
          // 明细数
          flex: 0 0 70rpx;
          min-width: 70rpx;
          font-size: 22rpx;
        }

        &:nth-child(7) {
          // 确认进度
          flex: 0 0 100rpx;
          min-width: 100rpx;
          font-size: 22rpx;
        }

        &:nth-child(8) {
          // 操作
          flex: 0 0 120rpx;
          min-width: 120rpx;
        }
      }
    }

    .table-body {
      min-width: 1100rpx; // 调整最小宽度为实际需要的宽度

      .table-row {
        display: flex;
        border-bottom: 1rpx solid #f0f0f0;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(0,122,255,0.05);
        }

        &:last-child {
          border-bottom: none;
        }

        .table-cell {
          padding: 15rpx 8rpx;
          font-size: 22rpx;
          color: #666;
          text-align: center;
          border-right: 1rpx solid #f0f0f0;
          word-break: keep-all;
          white-space: nowrap;
          font-weight: 500;

          &:last-child {
            border-right: none;
          }

          // 为不同列设置合适的宽度，与header保持一致 - 8列布局（包含行号）
          &:nth-child(1) {
            // 行号
            flex: 0 0 60rpx;
            min-width: 60rpx;
            font-size: 22rpx;
          }

          &:nth-child(2) {
            // 产品编码
            flex: 0 0 120rpx;
            min-width: 120rpx;
            font-size: 22rpx;
          }

          &:nth-child(3) {
            // 产品名称
            flex: 0 0 180rpx;
            min-width: 180rpx;
            text-align: left;
            white-space: normal;
            word-break: break-all;
            font-size: 22rpx;
            line-height: 1.3;
          }

          &:nth-child(4) {
            // 规格型号
            flex: 0 0 160rpx;
            min-width: 160rpx;
            text-align: left;
            white-space: normal;
            word-break: break-all;
            font-size: 22rpx;
            line-height: 1.3;
          }

          &:nth-child(5) {
            // 出库数量
            flex: 0 0 90rpx;
            min-width: 90rpx;
            font-size: 22rpx;
          }

          &:nth-child(6) {
            // 明细数
            flex: 0 0 70rpx;
            min-width: 70rpx;
            font-size: 22rpx;
          }

          &:nth-child(7) {
            // 确认进度
            flex: 0 0 100rpx;
            min-width: 100rpx;
            font-size: 22rpx;

            .progress-text {
              color: #007AFF;
              font-weight: 600;
            }
          }

          &:nth-child(8) {
            // 操作
            flex: 0 0 120rpx;
            min-width: 120rpx;
          }

          .detail-btn, .confirm-btn {
            padding: 6rpx 12rpx;
            border-radius: 6rpx;
            font-size: 18rpx;
            border: none;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2rpx 8rpx rgba(0,122,255,0.3);
            white-space: nowrap;

            &.detail-btn {
              background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
              color: #fff;

              &:active {
                transform: translateY(1rpx);
                box-shadow: 0 1rpx 4rpx rgba(0,122,255,0.3);
              }
            }

            &.confirm-btn {
              background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
              color: #fff;

              &:active {
                transform: translateY(1rpx);
                box-shadow: 0 1rpx 4rpx rgba(40, 167, 69, 0.3);
              }
            }

            &:disabled {
              background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
              color: #fff;
              box-shadow: 0 1rpx 4rpx rgba(108, 117, 125, 0.3);
            }
          }

          &.record-status-pending {
            color: #856404;
          }

          &.record-status-confirmed {
            color: #155724;
          }

          &.record-status-shipped {
            color: #0c5460;
          }

          &.record-status-cancelled {
            color: #721c24;
          }
        }
      }
    }
  }
}

// 确认状态标签样式
.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;

  &.confirm-status-confirmed {
    background: #d4edda;
    color: #155724;
  }

  &.confirm-status-pending {
    background: #fff3cd;
    color: #856404;
  }

  &.confirm-status-default {
    background: #e2e3e5;
    color: #383d41;
  }
}

// 进度文本样式
.progress-text {
  font-size: 22rpx;
  color: #007AFF;
  font-weight: bold;
}

// 操作按钮样式
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.action-btn {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: bold;
  border: none;
  min-width: 60rpx;

  &.confirm {
    background: #28a745;
    color: #fff;

    &:disabled {
      background: #6c757d;
      color: #fff;
    }
  }

  &.outbound {
    background: #007bff;
    color: #fff;

    &:disabled {
      background: #6c757d;
      color: #fff;
    }
  }

  &.submit {
    background: #28a745;
    color: #fff;

    &:disabled {
      background: #6c757d;
      color: #fff;
    }
  }
}

.extended-functions {
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;

  .function-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .function-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .stats-row {
    display: flex;
    justify-content: space-between;

    .stat-item {
      text-align: center;

      .stat-label {
        display: block;
        font-size: 22rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .stat-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #007AFF;
      }
    }
  }
}

.sn-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8rpx);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  animation: fadeIn 0.3s ease;

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .modal-content {
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    width: 100%;
    max-height: 80vh;
    box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;

    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-bottom: 1rpx solid rgba(0,0,0,0.05);
      border-radius: 24rpx 24rpx 0 0;

      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #2c3e50;
        text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.05);
      }

      .modal-close {
        padding: 12rpx;
        border-radius: 50%;
        transition: all 0.3s ease;

        &:active {
          background: rgba(0,0,0,0.05);
          transform: scale(0.9);
        }
      }
    }
    
    .modal-body {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      .product-summary {
        background: #f8f9fa;
        border-radius: 8rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        
        .summary-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .summary-label {
            font-size: 24rpx;
            color: #666;
          }
          
          .summary-value {
            font-size: 24rpx;
            color: #333;
            font-weight: bold;
          }
        }
      }
      
      .sn-detail-table {
        margin-bottom: 30rpx;
        overflow: hidden;
        border-radius: 8rpx;
        border: 1rpx solid #e0e0e0;
        
        .table-header {
          display: flex;
          background: #f8f9fa;
          border-radius: 8rpx 8rpx 0 0;
          
          .table-cell {
            flex: 1;
            padding: 15rpx 8rpx;
            font-size: 20rpx;
            font-weight: bold;
            color: #333;
            text-align: center;
            border-right: 1rpx solid #e0e0e0;
            word-break: keep-all;
            white-space: nowrap;

            &:last-child {
              border-right: none;
            }

            &:first-child {
              flex: 2; // SN码列更宽
            }

            &:nth-child(2) {
              flex: 1.5; // 确认状态列中等宽度
            }

            &:last-child {
              flex: 1.5; // 操作列中等宽度
            }
          }
        }
        
        .table-body {
          .table-row {
            display: flex;
            border-bottom: 1rpx solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
              border-radius: 0 0 8rpx 8rpx;
            }
            
            .table-cell {
              flex: 1;
              padding: 15rpx 8rpx;
              font-size: 20rpx;
              color: #666;
              text-align: center;
              border-right: 1rpx solid #f0f0f0;
              word-break: keep-all;
              white-space: nowrap;

              &:last-child {
                border-right: none;
              }

              &:first-child {
                flex: 2; // SN码列更宽
                font-weight: 500;
                color: #333;
              }

              &:nth-child(2) {
                flex: 1.5; // 确认状态列中等宽度
              }

              &:last-child {
                flex: 1.5; // 操作列中等宽度
              }

              .status-tag {
                padding: 4rpx 12rpx;
                border-radius: 12rpx;
                font-size: 18rpx;
                font-weight: bold;
                display: inline-block;

                &.confirm-status-confirmed {
                  background: #d4edda;
                  color: #155724;
                }

                &.confirm-status-pending {
                  background: #fff3cd;
                  color: #856404;
                }
              }

              .confirm-btn {
                padding: 6rpx 12rpx;
                border-radius: 4rpx;
                font-size: 18rpx;
                border: none;
                background: #28a745;
                color: #fff;
                white-space: nowrap;

                &:disabled {
                  background: #6c757d;
                }
              }
            }
          }
        }
      }
      
      .modal-actions {
        display: flex;
        gap: 20rpx;
        
        .action-btn {
          flex: 1;
          height: 80rpx;
          border-radius: 8rpx;
          font-size: 28rpx;
          font-weight: bold;
          
          &.cancel {
            background: #f8f9fa;
            color: #666;
            border: 1rpx solid #ddd;
          }
          
          &.confirm {
            background: #007AFF;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}

.shipping-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-content {
    background: #fff;
    border-radius: 12rpx;
    width: 600rpx;
    max-height: 80vh;
    
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .modal-close {
        padding: 10rpx;
      }
    }
    
    .modal-body {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      .input-group {
        margin-bottom: 30rpx;
        
        .input-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 15rpx;
        }
        
        .modal-input {
          width: 100%;
          height: 80rpx;
          padding: 0 20rpx;
          border: 1rpx solid #ddd;
          border-radius: 8rpx;
          font-size: 28rpx;
          background: #fff;
        }
      }
      
      .modal-actions {
        display: flex;
        gap: 20rpx;
        
        .action-btn {
          flex: 1;
          height: 80rpx;
          border-radius: 8rpx;
          font-size: 28rpx;
          font-weight: bold;
          
          &.cancel {
            background: #f8f9fa;
            color: #666;
            border: 1rpx solid #ddd;
          }
          
          &.confirm {
            background: #007AFF;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}
</style>